<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-06-05 23:50:49
 * @LastEditTime: 2024-06-06 00:56:54
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 
 * @FilePath: \chu-meng\client\src\pages\Project\page\site\components\createDrawer.vue
 * Copyright 版权声明
-->
<template>
  <a-drawer :title="titleMap[handleType]" :size="`large`" :open="open" @close="onClose">
    <template #extra>
      <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
      <a-button style="margin-right: 8px" @click="onResetForm">重置</a-button>
      <a-button type="primary" @click="onSubmit">提交</a-button>
    </template>
    <a-form
    ref="formRef"
    name="custom-validation"
    :model="formData"
    :rules="rules"
    v-bind="{
      labelCol: { span: 3 },
      // wrapperCol: { span: 14 },
    }"
    @finish="handleFinish"
    @validate="handleValidate"
    @finishFailed="handleFinishFailed"
  >
    <a-form-item has-feedback label="站点名称" name="name">
      <a-input v-model:value="formData.name" placeholder="请输入站点名称" />
    </a-form-item>
    <a-form-item has-feedback label="描述" name="desc">
      <a-textarea :auto-size="{ minRows: 3, maxRows: 5 }" placeholder="请输入站点描述" v-model:value="formData.desc" />
    </a-form-item>
    <a-form-item label="站点类型" name="type">
      <a-radio-group v-model:value="formData.type">
        <a-radio value="1">PC端网页</a-radio>
        <a-radio value="2">手机端网页</a-radio>
        <a-radio value="3">微信小程序</a-radio>
        <a-radio value="4">Android</a-radio>
        <a-radio value="5">IOS</a-radio>
      </a-radio-group>
    </a-form-item>
  </a-form>
  </a-drawer>
</template>

<script setup name="CreateDrawer">
import { ref, defineExpose, toRaw } from 'vue'
const open = ref(false)
const titleMap = {
  'create': '新建站点',
  'update': '编辑站点'
}
const handleType = ref('create')

const formRef = ref(null)
const rules = {
  name: [{ required: true, message: '请输入站点名称', trigger: 'change' }],
  desc: [{ required: true, message: '请输入站点描述', trigger: 'change' }],
  type: [{ required: true, message: '请选择站点类型', trigger: 'change' }]
}
const formData = ref({
  name: '',
  desc: '',
  type: ''
})

const onShow = ({ type = 'create', row = {} }) => {
  handleType.value = type
  formData.value = JSON.parse(JSON.stringify(row))
  open.value = true
  formRef.value.resetFields()
}

const onClose = () => {
  open.value = false
}

const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      console.log('values', formData, toRaw(formData))
    })
    .catch(error => {
      console.log('error', error)
    })
}

const onResetForm = () => {
  formRef.value.resetFields()
}

defineExpose({
  onShow
})
</script>

<style lang="scss" scoped>
</style>

